<template>
  <div class="app-container">
 <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary"  @click="search()" size="small"> 查询搜索</el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true"  size="small" label-width="140px">
          <el-form-item label="输入搜索：">
             <el-input v-model="searchMap.where.spec.specName" class="input-width" placeholder="规格名称" clearable @clear="search()"></el-input>
          </el-form-item>
           <el-form-item label="输入搜索：">
             <el-input v-model="searchMap.where.optionName" class="input-width" placeholder="规格选项名称" clearable @clear="search()"></el-input>
          </el-form-item>
          
        </el-form>
      </div>
    </el-card>
    
    <!-- 数据展示 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
        <el-button type="success" size="mini"  icon="el-icon-plus"  @click="dialogFormVisible = true">添加</el-button>
    </el-card>
    <el-table :data="specList" style="width: 100%">
      <el-table-column prop="id" label="规格选项ID"> </el-table-column>
      <el-table-column prop="optionName" label="规格选项名称"> </el-table-column>
       <el-table-column prop="spec.specName" label="规格名称"> </el-table-column>
        <el-table-column  label="操作"> 
          <!-- 自定义渲染 -->
        <template slot-scope="scope" >
            <div>
                <el-button  @click="handleEdit(scope.$index, scope.row)" type="primary" size="mini" icon="el-icon-edit" >修改</el-button>
                <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            </div>
        </template>
    </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <br/>
    <el-pagination
        style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.pageNum"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="searchMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
  

    <!-- 添加模态框 -->
  <el-dialog title="添加规格和规格选项" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form>
      <el-form-item label="规格名称" label-width="100px">
        <el-input v-model="entity.specName"></el-input>
      </el-form-item>
      <el-button type="success" icon="el-icon-plus" @click="addOptions()">添加规格选项</el-button>
      <el-table :data="entity.options" style="width: 100%">
            <el-table-column prop="date" label="规格选项名称" >
               <template slot-scope="scope">
                    <el-input v-model="entity.options[scope.$index].optionName" ></el-input>
               </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="delOpt(scope.$index)" icon="el-icon-delete">删除</el-button>
                    </template>    
            </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addSpec()">确 定</el-button>
    </div>
  </el-dialog>

  <!-- -----------------------------------------------修改规格BEGINBEGIN------------------------------------------------- -->
    <el-dialog title="修改规格选项" :visible.sync="updateFormVisible">
      <el-form>
        <el-form-item label="规格选项名称" :label-width="formLabelWidth">
          <el-input v-model="specOptions.optionName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属规格" :label-width="formLabelWidth">
          <el-input v-model="specOptions.spec.specName" disabled autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateOptions()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- --------------------------------------------------修改规格END---------------------------------------------------- -->
  </div>

</template>


<script>
import {searchSpec,saveSpec,getOne,updateOptions,delOne} from '@/api/spec'
export default {
  data() {
    return {
      dialogFormVisible: false,
      updateFormVisible:false,
      entity:{
            options: [
                {
                 optionName: "",
                }
            ],
            specName: ""
      },
      searchMap: {
        pageNum: 1,
        pageSize: 5,
        where: {
          name: "",
          spec:{}
        },
      },
      specList:[],
      total:0,
       specOptions: {
        id: 0,
        optionName: '',
        spec: {
          id: 0,
          specName: ''
        }
      }
     
    };
  },
  methods: {
      search(){
         //api
         searchSpec(this.searchMap).then(res=>{
             console.log(res);
             this.specList = res.data;
             this.total = res.totalSize;
         })
      },
       handleSizeChange(size){
          this.searchMap.pageSize = size;
          this.search();
      },
      handleCurrentChange(page){
          this.searchMap.pageNum = page;
          this.search()
      },
      addOptions(){
          this.entity.options.push({})
      },
      delOpt(index){
          this.entity.options.splice(index,1)
      },
      addSpec(){//添加功能
          saveSpec(this.entity)
          .then(res=>{
                this.$notify({
                    title:res.success?'成功':'失败',
                    message:res.msg,
                    type:res.success?'success':'error',
                })
                this.dialogFormVisible = false;  
                this.search();
            })
      },
      // 编辑按钮
      handleEdit(index, row) {
        this.updateFormVisible = true
        //console.log(row.id)
        getOne(row.id).then(res => {
          //console.log(res)
          this.specOptions = res.data
        })
      },
      //确认修改规格选项信息
      submitUpdateOptions() {
        //关闭弹窗
        this.updateFormVisible = false
        updateOptions(this.specOptions).then(res => {
          this.$notify({
            title: res.success === true ? '成功' : '失败',
            message: res.msg,
            type: res.success === true ? 'success' : 'error'
          })
          // 刷新表格
          this.search()
        })
      },
      // 删除按钮
      handleDelete(index, row) {
        this.$confirm('确认删除此条信息？删除后不可恢复!!!')
          .then(res => {
            if (res) {
              delOne(row.id).then(res => {
                this.$notify({
                  title: res.success === true ? '成功' : '失败',
                  message: res.msg,
                  type: res.success === true ? 'success' : 'error'
                })
                // 刷新表格
                this.search()
              })
            }
          })
      },
      //重置按钮
      handleResetSearch(){
        this.searchMap.where.optionName = ''
        this.searchMap.where.spec.specName = ''
        this.search();
      }
        
  },

  created(){
      this.search()
  }
};
</script>